<template>
  <div class="login">
    <el-card class="login_center">
      <template #header>
        <div class="card_header">
          <span>用户登录</span>
        </div>
      </template>
      <el-form :model="loginFormState" :rules="rules" ref="loginFormRef">
        <el-form-item prop="username">
          <el-input
            v-model.trim="loginFormState.username"
            maxlength="32"
            placeholder="请输入账号"
            clearable
          >
            <template #prefix>
              <Icons name="User"></Icons>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model.trim="loginFormState.password"
            maxlength="16"
            show-password
            placeholder="请输入密码"
            clearable
            @keyup.enter.exact="handleLogin"
          >
            <template #prefix>
              <Icons name="Lock"></Icons>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            style="width: 100%"
            :loading="loading"
            @click="handleLogin"
            >登 录</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import Icons from "../../components/Icons.vue";
import { UserModel } from "@/model/userModel";
import { decodeParam } from "@/utils/encrypt";
import appStore from "@/store";
import permissionToken from "@/utils/permissionToken";
const store = appStore.userStore;
const { proxy } = getCurrentInstance()!;
const route = useRoute();
const router = useRouter();
const loginFormRef = ref();
const loading = computed(() => appStore.authStore?.loading || false);
const loginFormState = reactive({
  username: "18045352559",
  password: "ggss123456",
});

const rules = {
  username: [{ required: true, message: "账号不能为空", trigger: "blur" }],
  password: [
    { required: true, message: "密码不能为空", trigger: "blur" },
    { min: 5, max: 16, message: "密码长度为5-16位", trigger: "blur" },
  ],
};
const { redirect } = useRoute().query as any;

const handleLogin = () => {
  loginFormRef.value.validate((valid: any) => {
    if (!valid) {
      return false;
    }

    appStore.authStore.login(loginFormState).then((res) => {
      const { token } = res;
      if (token) {
        const decodeRedirect = decodeParam(redirect);
        const routes = appStore.userStore.routers[0]?.children;
        console.log(";;;;;", appStore.userStore.routers);

        const isHas = routes?.some((item: any) => item.path == decodeRedirect);
        console.log("...", isHas);

        router.replace(isHas ? decodeRedirect : "/");
      } else {
        proxy?.$message.error("账号或密码错误！");
      }
    });

    // setTimeout(async () => {
    //   let users = {
    //     role: loginFormState.userName === "admin" ? "admin" : "user",
    //   };
    //   Object.assign(params, users);
    //   sessionStorage.setItem("jwt", JSON.stringify(params));
    //   store.setUser(params);
    //   loginFormState.loading = false;
    //   const decodeRedirect = decodeParam(redirect);
    //   const routes = appStore.userStore.routers[0]?.children;
    //   const isHas = routes?.some((item: any) => item.path == decodeRedirect);
    //   console.log("isHas", decodeRedirect);
    //   router.replace(isHas ? decodeRedirect : "/");
    //   proxy!.$message.success("登录成功");
    // }, 1000);
  });
};
</script>

<style lang="scss" scoped>
.login {
  width: 100vw;
  height: 100vh;
  background-image: url("../../assets/img/login.jpg");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  .login_center {
    width: 396px;
    height: auto;
  }

  .card_header {
    font-size: 18px;
    text-align: center;
  }
}
</style>
